<template>
  <!-- 大屏-经营看板 -->
  <div class="manageBoard-container">
    <div class="dataScreen" ref="manageScreenRef">
      <ScreenHeader
        :titleImg="postTitleImg"
        :menuItemsArr="postMenuArr"
        @clickPath="clickMenu"></ScreenHeader>
      <div class="manageScreen-main">
        <div class="dataScreen-lf">
          <div class="lf-top">
            <ItemTitel
              style="margin: 0"
              :itemTitleImg="postItemTitleImgObj['文体经营情况']">
              <template #rightCnBox>
                <SlecetTool
                  :optionsArr="literaryState.selectOptionsArr"
                  :getWidth="'119'"
                  v-model="literaryState.selectVal"
                  @postSelectVal="getSelecedVal"></SlecetTool>
              </template>
            </ItemTitel>
            <div class="lf-top-cn">
              <div class="cn-item">
                <div class="cnItem-title">文化中心</div>
                <div class="cnItem-cn">
                  <div
                    class="cnItem-list-item"
                    v-for="(n, i) in literaryState.performanceDataArr"
                    :key="i">
                    <img
                      src="@/assets/screenImg/commonImg/literaryTitleImg.png"
                      alt="" />
                    <div class="list-item-right">
                      <div class="titleBox">{{ n.title }}</div>
                      <div class="numBox">
                        <digital-flop
                          :config="n.moneyConfig"
                          style="width: 80px; height: 25px" />
                        <div
                          class="unit"
                          :style="{ left: n.unitLeftVal + 'px' }">
                          万元
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cn-item">
                <div class="cnItem-title">体育中心</div>
                <div class="cnItem-cn">
                  <div
                    class="cnItem-list-item"
                    v-for="(n, i) in literaryState.physicalDataArr"
                    :key="i">
                    <img
                      src="@/assets/screenImg/commonImg/literaryTitleImg.png"
                      alt="" />
                    <div class="list-item-right">
                      <div class="titleBox">{{ n.title }}</div>
                      <div class="numBox">
                        <digital-flop
                          :config="n.moneyConfig"
                          style="width: 80px; height: 25px" />
                        <div
                          class="unit"
                          :style="{ left: n.unitLeftVal + 'px' }">
                          万元
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="lf-second">
            <ItemTitel
              style="margin: 0"
              :itemTitleImg="postItemTitleImgObj['医疗经营情况']">
              <template #rightCnBox>
                <SlecetTool
                  :optionsArr="literaryState.selectOptionsArr"
                  :getWidth="'119'"
                  :modelValue="medicalbusinessState.quarter"
                  @postSelectVal="changeMedicalbusiness"></SlecetTool>
              </template>
            </ItemTitel>
            <div class="lf-second-cn">
              <div class="second-cn-top">
                <div
                  class="cn-top-item"
                  v-for="(n, i) in medicalTopItemsArr"
                  :key="i">
                  <div class="titleBox">
                    <el-divider direction="vertical" class="searchDivider" />{{
                      n.title
                    }}
                  </div>
                  <div class="itemsBox" v-for="(m, j) in n.children">
                    <div class="itemchildBox">
                      {{ m.name }}：{{
                        m.unit !== "人" ? changeNumToWan(m.num) : m.num
                      }}
                      {{ m.unit }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- chart区域 -->
              <div class="second-cn-chart">
                <MedicalChart ref="MedicalChartRef" />
              </div>
            </div>
          </div>
          <div class="lf-third">
            <ItemTitel
              style="margin: 0"
              :itemTitleImg="postItemTitleImgObj['养老经营情况']">
              <template #rightCnBox>
                <SlecetTool
                  :optionsArr="literaryState.selectOptionsArr"
                  :getWidth="'119'"
                  :modelValue="careBusinessState.quarter"
                  @postSelectVal="changeCareBusinessState"></SlecetTool>
              </template>
            </ItemTitel>
            <div class="lf-third-cn">
              <scroll-board
                :config="agedState.agedTableConfig"
                class="agedScrollBoard" />
            </div>
          </div>
          <div class="lf-bottom">
            <ItemTitel
              style="margin: 0"
              :itemTitleImg="postItemTitleImgObj['领创经营情况']"></ItemTitel>
            <div class="lf-bottom-cn">
              <div class="list-item">
                <div class="item-child">
                  <div
                    class="childBox"
                    v-for="(m, j) in LCDataState.children"
                    :key="j">
                    <img
                      src="@/assets/screenImg/commonImg/literaryTitleImg.png"
                      alt="" />
                    <div class="child-right">
                      <div class="titleBox">{{ m.name }}</div>
                      <div class="numBox">
                        <!-- <span>{{ changeNumToWan(m.num) }}</span
                        ><span> 万元</span> -->
                        <digital-flop
                          :config="m.moneyConfig"
                          style="width: 80px; height: 25px" />
                        <div
                          class="unit"
                          :style="{ left: m.unitLeftVal + 'px' }">
                          万元
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dataScreen-ct">
          <div class="ct-top">
            <ItemTitel
              style="width: 60%; margin: 0"
              :itemTitleImg="postItemTitleImgObj['总经营情况']"></ItemTitel>
            <div class="ct-top-cn">
              <div class="cn-item" v-for="(n, i) in generalMngDataArr" :key="i">
                <div class="imgBox"></div>
                <div class="rightBox">
                  <div class="right-title">
                    <div>{{ n.name }}</div>
                    <div
                      :style="{
                        color: !n.isUp ? '#F50000' : '#10FF0E',
                      }">
                      <img
                        v-if="n.pre !== 0"
                        :src="
                          !n.isUp
                            ? require('@/assets/screenImg/commonImg/down.png')
                            : require('@/assets/screenImg/commonImg/up.png')
                        "
                        alt="" />
                      <digital-flop
                        :config="n.perConfig"
                        style="width: 50px; height: 20px" />
                    </div>
                  </div>
                  <div class="right-info">
                    <digital-flop
                      :config="n.moneyConfig"
                      style="width: 140px; height: 42px" />
                    <div class="unit" :style="{ left: n.unitLeftVal + 'px' }">
                      万元
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ct-middle">
            <ItemTitel
              style="width: 60%; margin: 0"
              :itemTitleImg="postItemTitleImgObj['业务经营情况']"></ItemTitel>
            <div class="ct-middle-cn">
              <div class="middle-cn-top">
                <div
                  class="cn-item"
                  v-for="(n, i) in businessMngDataArr"
                  :key="i">
                  <div class="imgBox"></div>
                  <div class="rightBox">
                    <div class="right-title">
                      <div>{{ n.name }}</div>
                      <div
                        :style="{
                          color: !n.isUp ? '#F50000' : '#10FF0E',
                        }">
                        <img
                          v-show="n.per !== 0"
                          :src="
                            !n.isUp
                              ? require('@/assets/screenImg/commonImg/down.png')
                              : require('@/assets/screenImg/commonImg/up.png')
                          "
                          alt="" />
                        <digital-flop
                          :config="n.perConfig"
                          style="width: 50px; height: 20px" />
                      </div>
                    </div>
                    <div class="right-info">
                      <digital-flop
                        :config="n.moneyConfig"
                        style="width: 140px; height: 42px" />
                      <div class="unit" :style="{ left: n.unitLeftVal + 'px' }">
                        万元
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- chart区域 -->
              <div class="middle-cn-chart">
                <BusinessMngChart ref="BusinessMngChartRef" />
              </div>
            </div>
          </div>
          <div class="ct-bottom">
            <ItemTitel
              style="width: 60%; margin: 0"
              :itemTitleImg="postItemTitleImgObj['资产经营情况']"></ItemTitel>
            <div class="ct-bottom-cn">
              <div class="cn-item" v-for="(n, i) in assetMngDataArr" :key="i">
                <div class="imgBox"></div>
                <div class="rightBox">
                  <div class="right-title">
                    <div>{{ n.name }}</div>
                    <div
                      :style="{
                        color: !n.isUp ? '#F50000' : '#10FF0E',
                      }">
                      <img
                        v-show="n.per !== 0"
                        :src="
                          !n.isUp
                            ? require('@/assets/screenImg/commonImg/down.png')
                            : require('@/assets/screenImg/commonImg/up.png')
                        "
                        alt="" />
                      <digital-flop
                        :config="n.perConfig"
                        style="width: 50px; height: 20px" />
                    </div>
                  </div>
                  <div class="right-info">
                    <digital-flop
                      :config="n.moneyConfig"
                      style="width: 140px; height: 42px" />
                    <div class="unit" :style="{ left: n.unitLeftVal + 'px' }">
                      万元
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dataScreen-rg">
          <div class="rg-top">
            <ItemTitel
              style="margin: 0"
              :itemTitleImg="postItemTitleImgObj['教育经营情况']">
              <template #rightCnBox>
                <SlecetTool
                  :optionsArr="literaryState.selectOptionsArr"
                  :getWidth="'119'"
                  :modelValue="educationBusinessState.quarter"
                  @postSelectVal="changeEducationBusiness"></SlecetTool>
              </template>
            </ItemTitel>
            <div class="rg-top-cn">
              <div class="cn-list">
                <div
                  class="list-item"
                  v-for="(n, i) in teachState.teachListDataArr"
                  :key="i">
                  <div class="imgBox">
                    <img
                      src="@/assets/screenImg/commonImg/techTitleImg.png"
                      alt="" />
                  </div>
                  <div class="rightBox">
                    <div class="right-title">
                      <span>{{ n.name }}</span>
                      <span
                        :style="{
                          color: !n.isUp ? '#F50000' : '#10FF0E',
                        }"
                        ><img
                          v-show="n.per !== 0"
                          :src="
                            !n.isUp
                              ? require('@/assets/screenImg/commonImg/down.png')
                              : require('@/assets/screenImg/commonImg/up.png')
                          "
                          alt="" />
                        {{ n.per }}</span
                      >
                    </div>
                    <div class="right-info">
                      {{ changeNumToWan(n.money) }}
                      <span class="unit">万元</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cn-table">
                <scroll-board
                  :config="teachState.teachTableConfig"
                  class="teachScrollBoard" />
              </div>
            </div>
          </div>
          <div class="rg-second">
            <ItemTitel
              style="margin: 0"
              :itemTitleImg="postItemTitleImgObj['文创传媒经营情况']">
              <template #rightCnBox>
                <SlecetTool
                  :optionsArr="literaryState.selectOptionsArr"
                  :getWidth="'119'"
                  :modelValue="cultureBusinessState.quarter"
                  @postSelectVal="changeBusinessState"></SlecetTool>
              </template>
            </ItemTitel>
            <!-- chart区域 -->
            <div class="second-cn-chart">
              <MediaChart ref="MeiaChartRef" />
            </div>
          </div>
          <div class="rg-third">
            <ItemTitel
              style="margin: 0"
              :itemTitleImg="postItemTitleImgObj['体育公司经营情况']">
              <template #rightCnBox>
                <SlecetTool
                  :optionsArr="literaryState.selectOptionsArr"
                  :getWidth="'119'"
                  :modelValue="physicalBusinessState.quarter"
                  @postSelectVal="changePhysicalBusinessState"></SlecetTool>
              </template>
            </ItemTitel>
            <div class="rg-third-cn">
              <div class="cn-item">
                <div class="item-title">体育场馆</div>
                <div class="item-cn">
                  <div class="titleBox">收入：</div> 
                  <digital-flop
                    :config="physicalState.groundMoneyConfig"
                    style="width: 120px; height: 45px" />
                  <div
                    class="unit"
                    :style="{ left: physicalState.unitGroundLeftVal + 'px' }">
                    万元
                  </div>
                </div>
              </div>
              <div class="cn-item">
                <div class="item-title">停车场</div>
                <div class="item-cn">
                  <div class="titleBox">收入：</div> 
                  <digital-flop
                    :config="physicalState.stopCarMoneyConfig"
                    style="width: 120px; height: 45px" />
                  <div
                    class="unit"
                    :style="{ left: physicalState.unitStopLeftVal + 'px' }">
                    万元
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rg-bottom">
            <ItemTitel
              style="margin: 0"
              :itemTitleImg="postItemTitleImgObj['风险排名']"></ItemTitel>
            <div class="bottom-cn-chart">
              <RiskChart ref="RiskLeftChartRef" idName="Left" />
              <RiskChart ref="RiskRightChartRef" idName="Right" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="manageBoard">
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { ElDivider } from "element-plus";
import ScreenHeader from "../components/ScreenHeader";
import ItemTitel from "../components/ItemTitel";
import { ScrollBoard, DigitalFlop } from "@kjgl77/datav-vue3";
import { getScale, changeNumToWan } from "../utils/handelScreen";
import MedicalChart from "./components/MedicalChart.vue";
import MediaChart from "./components/MediaChart.vue";
import RiskChart from "./components/RiskChart.vue";
import BusinessMngChart from "./components/BusinessMngChart.vue";
import {
  getManageBoardAssets,
  getManageBoardBadminton2,
  getManageBoardBusiness,
  getManageBoardDetail,
  getManageBoardLaboratory,
  getManageBoardMedia,
  getManageBoardMedical,
  getManageBoardOutpatient,
  getManageBoardPension,
  getManageBoardSport,
  getManageBoardSportsCenter,
  getManageBoardTotal,
  getManageBoardTotal2,
  getManageBoardVenue,
  getManageBoardBusinessDetail,
} from "@/api/dashboard/manageBoard";
import SlecetTool from "../components/SlecetTool";

// 菜单项
const postMenuArr = ref([
  { name: "医疗", path: "/dashboard/medical" },
  { name: "养老", path: "/dashboard/retirement" },
  { name: "托育", path: "/dashboard/childcare" },
  { name: "文创", path: "" },
  { name: "体育", path: "" },
  { name: "领创", path: "" },
]);
const router = useRouter();
const clickMenu = (i) => {
  if (i) router.push(i);
  // window.location.href = i;
};

// 页面大标题图片
const postTitleImg = require("@/assets/screenImg/manageBoardImg/经营看板.png");
// 各小标题图片
const postItemTitleImgObj = reactive({
  文体经营情况: require("@/assets/screenImg/manageBoardImg/文体经营情况.png"),
  医疗经营情况: require("@/assets/screenImg/manageBoardImg/医疗经营情况.png"),
  养老经营情况: require("@/assets/screenImg/manageBoardImg/养老经营情况.png"),
  领创经营情况: require("@/assets/screenImg/manageBoardImg/领创经营情况.png"),
  总经营情况: require("@/assets/screenImg/manageBoardImg/总经营情况.png"),
  业务经营情况: require("@/assets/screenImg/manageBoardImg/业务经营情况.png"),
  资产经营情况: require("@/assets/screenImg/manageBoardImg/资产经营情况.png"),
  教育经营情况: require("@/assets/screenImg/manageBoardImg/教育经营情况.png"),
  文创传媒经营情况: require("@/assets/screenImg/manageBoardImg/文创传媒经营情况.png"),
  体育公司经营情况: require("@/assets/screenImg/manageBoardImg/体育公司经营情况.png"),
  风险排名: require("@/assets/screenImg/manageBoardImg/风险排名.png"),
});

// 文体经营情况
const literaryMoneyBaseConfig = reactive({
  content: "{nt}",
  toFixed: 2,
  textAlign: "left",
  animationFrame: 200,
  style: {
    fontSize: 18,
    fontFamily: "SourceHanSansMedium",
    fill: "#36E3E3",
    shadowOffsetX: 0,
    shadowOffsetY: 1,
    shadowBlur: 5,
    shadowColor: "rgba(86, 202, 255, 0.81)",
  },
});
const literaryState = reactive({
  selectVal: "第二季度", //默认展示第二季度的数据
  // 文化中心
  performanceDataArr: [
    {
      title: "收入",
      moneyConfig: {
        number: [0],
        ...literaryMoneyBaseConfig,
      },
      unitLeftVal: 40,
    },
    {
      title: "成本",
      moneyConfig: {
        number: [0],
        ...literaryMoneyBaseConfig,
      },
      unitLeftVal: 40,
    },
    {
      title: "利润",
      moneyConfig: {
        number: [0],
        ...literaryMoneyBaseConfig,
      },
      unitLeftVal: 40,
    },
  ],
  // 体育中心
  physicalDataArr: [
    {
      title: "收入",
      moneyConfig: {
        number: [0],
        ...literaryMoneyBaseConfig,
      },
      unitLeftVal: 40,
    },
    {
      title: "成本",
      moneyConfig: {
        number: [0],
        ...literaryMoneyBaseConfig,
      },
      unitLeftVal: 40,
    },
    {
      title: "利润",
      moneyConfig: {
        number: [0],
        ...literaryMoneyBaseConfig,
      },
      unitLeftVal: 40,
    },
  ],
  // 下拉选择框 - 选项在前端固定
  selectOptionsArr: [
    {
      label: "第一季度",
      value: "第一季度",
    },
    {
      label: "第二季度",
      value: "第二季度",
    },
    {
      label: "第三季度",
      value: "第三季度",
    },
    {
      label: "第四季度",
      value: "第四季度",
    },
  ],
});
/**
 * 获取文体经营情况
 * @returns {Promise<void>}
 */
const getPerformanceVenue = async () => {
  const { data, httpStatusCode } = await getManageBoardVenue();
  if (httpStatusCode === 200 && data.records.length) {
    const resObj = data.records
      .filter((item) => item.year === new Date().getFullYear() + "")
      .filter((item) => item.quarter === literaryState.selectVal)[0];
    const priceNumEnum = {
      0: "income",
      1: "cost",
      2: "profit",
    };
    literaryState.performanceDataArr.map((n, i) => {
      n.moneyConfig.number[0] = resObj[priceNumEnum[i]]
        ? resObj[priceNumEnum[i]] / 10000
        : 0;
      let dataStr = n.moneyConfig.number[0].toFixed(2) + "";
      n.unitLeftVal = dataStr.length * 10;
    });
  }
};
getPerformanceVenue();
/**
 * 文体经营情况_体育中心
 */
const getPerformancePhysical = async () => {
  const { data, httpStatusCode } = await getManageBoardSportsCenter();
  if (httpStatusCode === 200 && data.records.length) {
    const resObj = data.records
      .filter((item) => item.year === new Date().getFullYear() + "")
      .filter((item) => item.quarter === literaryState.selectVal)[0];
    const priceNumEnum = {
      0: "income",
      1: "cost",
      2: "profit",
    };
    literaryState.physicalDataArr.map((n, i) => {
      n.moneyConfig.number[0] = resObj[priceNumEnum[i]]
        ? resObj[priceNumEnum[i]] / 10000
        : 0;
      let dataStr = n.moneyConfig.number[0].toFixed(2) + "";
      n.unitLeftVal = dataStr.length * 10;
    });
    // literaryState.physicalDataArr[0].num = res.income;
    // literaryState.physicalDataArr[1].num = res.cost;
    // literaryState.physicalDataArr[2].num = res.profit;
  }
};
getPerformancePhysical();

/**
 * 选择框切换
 * tips:这里本可以不用多次调用接口,但是后端数据的写死,前端必须保证能拿到的是最新数据,因此选择了多次调用接口
 */
const getSelecedVal = () => {
  getPerformanceVenue();
  getPerformancePhysical();
};

// 医疗经营情况
const medicalTopItemsArr = ref([
  {
    title: "门诊",
    children: [
      {
        name: "收入",
        num: "0.00",
        unit: "万元",
      },
      {
        name: "客流量",
        num: "0",
        unit: "人",
      },
    ],
  },
  {
    title: "实验室",
    children: [
      {
        name: "收入",
        num: "0.00",
        unit: "万元",
      },
      {
        name: "检测量",
        num: "0",
        unit: "人",
      },
    ],
  },
]);

const medicalbusinessState = ref({
  quarter: "第二季度",
});
const changeMedicalbusiness = (val) => {
  medicalbusinessState.value.quarter = val;
  getMedicalOutpatient();
  getMedicalLab();
  getMedicalProportion();
};

/**
 * 获取医疗经营情况_门诊
 */
const getMedicalOutpatient = async () => {
  const { quarter } = medicalbusinessState.value;
  const { data, httpStatusCode } = await getManageBoardOutpatient({ quarter });
  if (httpStatusCode === 200) {
    const res = data.records?.[0] ?? { income: 0, flow: 0 };
    const enumOutpatient = {
      0: "income",
      1: "flow",
    };
    medicalTopItemsArr.value[0].children.forEach((item, idx) => {
      item.num = res[enumOutpatient[idx]];
    });
  }
};
getMedicalOutpatient();
/**
 * 医疗经营情况_实验室
 */
const getMedicalLab = async () => {
  const { quarter } = medicalbusinessState.value;
  const { data, httpStatusCode } = await getManageBoardLaboratory({ quarter });
  if (httpStatusCode === 200) {
    const res = data.records?.[0] ?? { income: 0, flow: 0 };
    medicalTopItemsArr.value[1].children[0].num = res.income;
    medicalTopItemsArr.value[1].children[1].num = res.flow ?? 0;
  }
};
getMedicalLab();

/**
 * 医疗经营情况_医疗经营占比_图表
 */
const medicalProportionArr = ref([]);
const getMedicalProportion = async () => {
  const { quarter } = medicalbusinessState.value;
  const { data, httpStatusCode } = await getManageBoardMedical({ quarter });
  if (httpStatusCode === 200) {
    medicalProportionArr.value = data.records
      .filter((item) => item.year === new Date().getFullYear() + "")
      .map((item) => ({
        name: item.name,
        value: item.proportion * 100,
        price: changeNumToWan(item.value),
      }))
      .sort((a, b) => {
        return b.value - a.value;
      });
    MedicalChartRef.value?.initMedicalChart(medicalProportionArr.value);
  }
};

// 经营看板_养老经营情况
const careBusinessState = ref({
  quarter: "第二季度",
});
const changeCareBusinessState = (val) => {
  careBusinessState.value.quarter = val;
  getAgedData();
};
const agedTableBaseConfig = reactive({
  header: ["名称", "销售额/收入(万元)", "成本(万元)", "利润(万元)"],
  headerHeight: 25,
  headerBGC: "rgba(21,77,160,0.2)",
  evenRowBGC: "rgba(21,77,160,0.1)",
  columnWidth: [200, 120, 110, 110],
  align: ["center", "center", "center", "center"],
});
const agedState = reactive({
  agedTableConfig: {
    ...agedTableBaseConfig,
    data: [],
  },
});
const getAgedData = async () => {
  const { quarter } = careBusinessState.value;
  const { data, httpStatusCode } = await getManageBoardPension({ quarter });
  if (httpStatusCode === 200) {
    const res = data.records.filter(
      (item) => item.year === new Date().getFullYear() + ""
    );
    let agedTableDataArr = res.map((n, i) => {
      return [
        n.name,
        changeNumToWan(n.income),
        changeNumToWan(n.cost),
        changeNumToWan(n.profit),
      ];
    });
    agedState.agedTableConfig = {
      ...agedTableBaseConfig,
      data: agedTableDataArr,
    };
  }
};
getAgedData();

// 领创经营情况
const LCDataState = reactive({
  title: "羽毛球馆",
  children: [
    {
      name: "物业费应收",
      // num: 0.0,
      moneyConfig: {
        number: [0],
        ...literaryMoneyBaseConfig,
      },
      unitLeftVal: 40,
    },
    {
      name: "物业费实收",
      // num: 0,
      moneyConfig: {
        number: [0],
        ...literaryMoneyBaseConfig,
      },
      unitLeftVal: 40,
    },
  ],
});
/**
 * 获取领创经营情况
 */
const getLCData = async () => {
  const { data, httpStatusCode } = await getManageBoardBadminton2();
  if (httpStatusCode === 200 && data.records.length) {
    const resObj = data.records.filter(
      (item) => item.year === new Date().getFullYear() + ""
    )[0];
    const dataKeyObj = {
      0: "property_fee_receivable",
      1: "property_fee_real",
    };
    LCDataState.children.map((n, i) => {
      n.moneyConfig.number[0] = resObj[dataKeyObj[i]]
        ? resObj[dataKeyObj[i]] / 10000
        : 0;
      let dataStr = n.moneyConfig.number[0].toFixed(2) + "";
      n.unitLeftVal = dataStr.length * 10;
    });
  }
};

getLCData();

// 总经营情况
const generalMngMoneyBaseConfig = reactive({
  content: "{nt}",
  toFixed: 2,
  textAlign: "left",
  animationFrame: 200,
  style: {
    fontSize: 30,
    fill: "#fff",
    shadowOffsetX: 0,
    shadowOffsetY: 1,
    shadowBlur: 7,
    shadowColor: "#FFDA3A",
  },
});
const generalMngPerBaseConfig = (value) => {
  return {
    content: "{nt}%",
    toFixed: 2,
    textAlign: "left",
    animationFrame: 200,
    style: {
      fontSize: 12,
      fill: value >= 0 ? "#10FF0E" : "#F50000",
    },
  };
};
const generalMngDataArr = ref([
  {
    name: "收入",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
  {
    name: "支出",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
  {
    name: "成本",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
  {
    name: "利润",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
]);

/**
 * 获取总经营情况
 * @returns {Promise<void>}
 */
const getGeneralMngData = async () => {
  const { data, httpStatusCode } = await getManageBoardTotal2();
  if (httpStatusCode === 200) {
    const res = data.records.filter(
      (item) => item.year === new Date().getFullYear() + ""
    )[0];
    const enumGeneral = {
      0: "income",
      1: "expenditure",
      2: "cost",
      3: "profit",
    };
    const enumGeneralPer = {
      0: "income_rate",
      1: "expenditure_rate",
      2: "cost_rate",
      3: "profit_rate",
    };
    generalMngDataArr.value.forEach((item, idx) => {
      item.moneyConfig.number[0] = res[enumGeneral[idx]]
        ? res[enumGeneral[idx]] / 10000
        : 0;
      let valStr = item.moneyConfig.number[0].toFixed(2) + "";
      item.unitLeftVal = valStr.length * 16;
      item.isUp = res[enumGeneralPer[idx]] >= 0;
      let getPerNum = res[enumGeneralPer[idx]]
        ? res[enumGeneralPer[idx]] * 100
        : 0;
      item.perConfig = {
        number: [getPerNum],
        ...generalMngPerBaseConfig(getPerNum),
      };
    });
  }
};
getGeneralMngData();

// 业务经营情况
const businessMngDataArr = ref([
  {
    name: "业务收入",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
  {
    name: "支出",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
  {
    name: "业务利润",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
]);

/**
 * 获取业务经营情况
 * @returns {Promise<void>}
 */
const getBusinessMngData = async () => {
  const { data, httpStatusCode } = await getManageBoardBusiness();
  if (httpStatusCode === 200) {
    const res = data.records.filter(
      (item) => item.year === new Date().getFullYear() + ""
    )[0];
    const enumBusiness = {
      0: "income",
      1: "expenditure",
      2: "profit",
    };
    const enumBusinessPer = {
      0: "income_rate",
      1: "expenditure_rate",
      2: "profit_rate",
    };
    businessMngDataArr.value.forEach((item, idx) => {
      item.moneyConfig.number[0] = res[enumBusiness[idx]]
        ? res[enumBusiness[idx]] / 10000
        : 0;
      let valStr = item.moneyConfig.number[0].toFixed(2) + "";
      item.unitLeftVal = valStr.length * 16;
      item.isUp = res[enumBusinessPer[idx]] >= 0;
      let getPerNum = res[enumBusinessPer[idx]]
        ? res[enumBusinessPer[idx]] * 100
        : 0;
      item.perConfig = {
        number: [getPerNum],
        ...generalMngPerBaseConfig(getPerNum),
      };
    });
  }
};
getBusinessMngData();

// 经营情况支出数据数组(添加数据时需按照 文体, 医疗, 养老, 领川, 教育, 文创传媒, 体育场馆的顺序进行添加)
const ManageBoardExpenditure = ref([]);
// 经营情况收入数据数组(添加数据时需按照 文体, 医疗, 养老, 领川, 教育, 文创传媒, 体育场馆的顺序进行添加)
const ManageBoardIncome = ref([]);
const getBusinessMngDetail = async () => {
  const { httpStatusCode, data } = await getManageBoardBusinessDetail();
  if (httpStatusCode === 200) {
    let tempData = data.records[0];
    ManageBoardExpenditure.value.push(
      tempData.style_expenditure,
      tempData.health_expenditure,
      tempData.retirement_expenditure,
      tempData.lingchuan_expenditure,
      tempData.education_expenditure,
      tempData.cultural_creativity_expenditure,
      tempData.sport_expenditure
    );
    ManageBoardIncome.value.push(
      tempData.style_income,
      tempData.health_income,
      tempData.retirement_income,
      tempData.lingchuan_income,
      tempData.education_income,
      tempData.cultural_creativity_income,
      tempData.sport_income
    );
  }
};

// 资产经营情况
const assetMngDataArr = ref([
  {
    name: "应收租金",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
  {
    name: "实收租金",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
  {
    name: "资产价值",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
  {
    name: "经营利润",
    perConfig: {
      number: [0],
      ...generalMngPerBaseConfig(0),
    },
    moneyConfig: {
      number: [0],
      ...generalMngMoneyBaseConfig,
    },
    unitLeftVal: 64,
    isUp: true,
  },
]);
const getAssetManDataArr = async () => {
  const { data, httpStatusCode } = await getManageBoardAssets();
  if (httpStatusCode === 200) {
    const res = data.records.filter(
      (item) => item.year === new Date().getFullYear() + ""
    )[0];
    const enumAsset = {
      0: "rent_receivable",
      1: "rent_real",
      2: "asset_value",
      3: "profit",
    };
    const enumAssetPer = {
      0: "rent_receivable_rate",
      1: "rent_real_rate",
      2: "asset_value_rate",
      3: "profit_rate",
    };
    assetMngDataArr.value.forEach((item, idx) => {
      item.moneyConfig.number[0] = res[enumAsset[idx]]
        ? res[enumAsset[idx]] / 10000
        : 0;
      let valStr = item.moneyConfig.number[0].toFixed(2) + "";
      item.unitLeftVal = valStr.length * 16;
      item.isUp = res[enumAssetPer[idx]] >= 0;
      let getPerNum = res[enumAssetPer[idx]] ? res[enumAssetPer[idx]] * 100 : 0;
      item.perConfig = {
        number: [getPerNum],
        ...generalMngPerBaseConfig(getPerNum),
      };
    });
  }
};
getAssetManDataArr();

// 教育经营情况
const teachTableBaseConfig = reactive({
  header: ["名称", "应收(万元)", "实收(万元)"],
  headerHeight: 25,
  headerBGC: "rgba(21,77,160,0.2)",
  evenRowBGC: "rgba(21,77,160,0.1)",
  columnWidth: [200, 100, 100],
  align: ["center", "center", "center"],
});

const educationBusinessState = ref({
  quarter: "第二季度",
});
const changeEducationBusiness = (val) => {
  educationBusinessState.value.quarter = val;
  getTeachListDataArr();
  getManageBoardDetailList();
};
const teachState = reactive({
  teachListDataArr: [
    {
      name: "总应收",
      per: "",
      money: "",
      isUp: true,
    },
    {
      name: "总实收",
      per: "",
      money: "",
      isUp: true,
    },
  ],
  teachTableConfig: {
    ...teachTableBaseConfig,
    data: [],
  },
});
const getTeachListDataArr = async () => {
  const { quarter } = educationBusinessState.value;
  const { data, httpStatusCode } = await getManageBoardTotal({ quarter });
  if (httpStatusCode === 200) {
    const res = data.records?.[0] ?? {
      receivable: 0,
      real: 0,
      receivable_rate: 0,
      real_rate: 0,
    };
    const enumTeach = {
      0: "receivable",
      1: "real",
    };
    const enumTeachPer = {
      0: "receivable_rate",
      1: "real_rate",
    };
    teachState.teachListDataArr.forEach((item, idx) => {
      item.money = res[enumTeach[idx]];
      item.isUp = res[enumTeachPer[idx]] >= 0;
      item.per = (Math.abs(res[enumTeachPer[idx]]) * 100).toFixed(0) + "%";
    });
  }
};
const getManageBoardDetailList = async () => {
  const { quarter } = educationBusinessState.value;
  const { data, httpStatusCode } = await getManageBoardDetail({ quarter });
  if (httpStatusCode === 200) {
    const res = data.records.filter(
      (item) => item.year === new Date().getFullYear() + ""
    );
    let teachTableDataArr = res.map((n, i) => {
      return [n.name, changeNumToWan(n.receivable), changeNumToWan(n.real)];
    });
    teachState.teachTableConfig = {
      ...teachTableBaseConfig,
      data: teachTableDataArr,
    };
  }
};
getTeachListDataArr();
getManageBoardDetailList();

// 体育公司经营情况
const physicalState = reactive({
  groundMoneyConfig: {
    number: [0],
    ...literaryMoneyBaseConfig,
  },
  unitGroundLeftVal: 80,
  stopCarMoneyConfig: {
    number: [0],
    ...literaryMoneyBaseConfig,
  },
  unitStopLeftVal: 80,
});

const physicalBusinessState = ref({
  quarter: "第二季度",
});
const changePhysicalBusinessState = (val) => {
  physicalBusinessState.value.quarter = val;
  getPhysicalState();
};
const getPhysicalState = async () => {
  const { quarter } = physicalBusinessState.value;
  const { data, httpStatusCode } = await getManageBoardSport({ quarter });
  if (httpStatusCode === 200) {
    let res = data.records;
    if (!res.length) {
      res = [
        { type: 1, income: 0 },
        { type: 2, income: 0 },
      ];
    }
    res.forEach((item) => {
      if (item.type === 1) {
        physicalState.groundMoneyConfig.number[0] = item.income
          ? item.income / 10000
          : 0;
        let dataStr = physicalState.groundMoneyConfig.number[0].toFixed(2) + "";
        physicalState.unitGroundLeftVal = dataStr.length * 22;
      } else {
        physicalState.stopCarMoneyConfig.number[0] = item.income
          ? item.income / 10000
          : 0;
        let dataStr = physicalState.stopCarMoneyConfig.number[0].toFixed(2) + "";
        physicalState.unitStopLeftVal = dataStr.length * 23;
      }
    });
  }
};
getPhysicalState();

// 文创传媒经营情况
const mediaBusinessSituation = ref({});
const getMediaBusinessSituation = async () => {
  const { quarter } = cultureBusinessState.value;
  const { data, httpStatusCode } = await getManageBoardMedia({ quarter });
  if (httpStatusCode === 200) {
    const res = data.records.filter(
      (item) => item.year === new Date().getFullYear() + ""
    );
    let newRes = res.sort((a, b) => {
      return a.type - b.type;
    });
    mediaBusinessSituation.value.series1 = newRes.map((item) => item.amount);
    MeiaChartRef.value?.initMediaChart(mediaBusinessSituation);
  }
};

const cultureBusinessState = ref({
  quarter: "第二季度",
});
const changeBusinessState = (val) => {
  cultureBusinessState.value.quarter = val;
  getMediaBusinessSituation();
};

// 获取子组件的ref
const MedicalChartRef = ref();
const MeiaChartRef = ref();
const RiskLeftChartRef = ref();
const RiskRightChartRef = ref();
const BusinessMngChartRef = ref();

// 所有图表对象
const screenChartObj = reactive({
  chart1: null,
  chart2: null,
  chart3: null,
  chart4: null,
  chart5: null,
});
const initAllCharts = () => {
  screenChartObj.chart1 = MedicalChartRef.value?.initMedicalChart(
    medicalProportionArr.value
  );
  screenChartObj.chart2 = MeiaChartRef.value?.initMediaChart(
    mediaBusinessSituation
  );
  screenChartObj.chart3 = RiskLeftChartRef.value?.initRiskChart("left");
  screenChartObj.chart4 = BusinessMngChartRef.value?.initBusinessTypeChart(
    ManageBoardIncome.value,
    ManageBoardExpenditure.value
  );
  screenChartObj.chart5 = RiskRightChartRef.value?.initRiskChart("right");
};

// 监听浏览器 resize 事件时执行
const manageScreenRef = ref(null);
const screenResize = () => {
  if (manageScreenRef.value) {
    manageScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

onMounted(async () => {
  // 初始化自适应
  if (manageScreenRef.value) {
    // 缩放并居中
    manageScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    // 设计稿宽度
    manageScreenRef.value.style.width = `1920px`;
    // 设计稿高度
    manageScreenRef.value.style.height = `1080px`;
  }
  await getMediaBusinessSituation();
  await getBusinessMngDetail();
  await getMedicalProportion();
  // 初始化 echarts
  initAllCharts();
  // 为浏览器绑定自适应函数
  window.addEventListener("resize", screenResize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", screenResize);
  Object.values(screenChartObj).forEach((val) => val?.dispose());
});
</script>

<style lang="scss" scoped>
// 对于样式较多的文件进行抽离
@import "./manageBoard.scss";
</style>
<style lang="scss">
// ScrollBoard 默认样式修改
.manageBoard-container {
  .dataScreen {
    .manageScreen-main {
      .dataScreen-lf {
        .lf-third {
          .lf-third-cn {
            .agedScrollBoard {
              .header {
                .header-item {
                  font-size: 12px;
                  color: #56caff;
                }
              }
              .rows {
                .row-item {
                  font-size: 12px !important;
                  color: #d3e3ff !important;
                  opacity: 0.7 !important;
                }
              }
            }
          }
        }
      }
      .dataScreen-rg {
        .rg-top {
          .rg-top-cn {
            .cn-table {
              .teachScrollBoard {
                .header {
                  .header-item {
                    font-size: 12px;
                    color: #56caff;
                  }
                }
                .rows {
                  .row-item {
                    font-size: 12px !important;
                    color: #d3e3ff !important;
                    opacity: 0.7 !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
